<template>
	<view class="u-padding-top-30">

		<view class="mdx-center-min u-flex lines">
			<view class="leftTitle">
				购票平台
			</view>
			<view class="right_box">
				<u-input :height="40" :disabled="true" v-model="ptText" type="text" :border="false" placeholder="请输入" />
			</view>
		</view>
		<view class="mdx-center-sm">
			<u-checkbox-group :wrap='true' @change="checkboxGroupChange">
				<u-checkbox v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.name">
					{{item.name}}
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="mdx-center-min bottom_pay">
			<u-button :custom-style="customStyle" @click="save" :hairLine="false">保存</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ptText: '', //
				list: [],
				customStyle: {
					marginTop: '60px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#333333',
					background: '#FFEC3E',
					border: '#fff',
					"font-weight": 550,

				},
			}
		},
		onLoad(option) {
			let listxt = option.ptxt.split(',')
			console.log(listxt);
			// list
			listxt.forEach(e => {
				this.list.push({
					name: e,
					checked: false,
					disabled: false
				})
			})
		},
		methods: {
			checkboxGroupChange(e) {
				this.ptText = e.join('、')
			},
			save() {
				if (!this.ptText.length) {
					this.$refs.uToast.show({
						title: '请选择购票平台',
						type: 'error',
					})
					return;
				}
				uni.setStorage({
					key: 'ptText',
					data: this.ptText,
					success() {
						uni.navigateBack({
							delta: 1
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.bottom_pay {
		position: fixed;
		bottom: 10rpx;
		width: 92%;
		margin-left: 4%;
	}

	.lines {
		padding: 25rpx 20rpx;
		border-radius: 10rpx;

		background-color: #FAFAFA;
		margin-bottom: 40rpx;

		.leftTitle {
			font-size: 30rpx;
			width: 150rpx;
			border-right: 1rpx solid #DDDDDD;
			color: #999999;
		}

		.right_box {
			padding: 0 20rpx;
			flex: 1;
			position: relative;
		}
	}
</style>
